<template>
  <view v-if="!loading" class="main">
    <familyInner :hasScroll="hasScroll" @changePerson="changePerson"></familyInner>
    <view class="list">
      <view v-if="comInsuranceList.length > 0">
        <view v-for="(item, index) in comInsuranceList" :key="index" class="item" @click="goDetail(item.id)">
          <view class="name">{{ item.insuranceProductName }}</view>
          <view class="info">
            <view class="left">被保人：</view>
            <view class="right">{{ item.insuredName }}</view>
          </view>
          <view class="info">
            <view class="left">保险期限：</view>
            <view v-if="item.startDate" class="right"
              >{{ item.startDate | formatDate }} - {{ item.endDate | formatDate }}</view
            >
            <view v-else class="right">暂无</view>
          </view>
          <view class="info">
            <view class="left">已保障：</view>
            <view v-if="item.days && item.days >= 0" class="right">{{ item.days }}天</view>
            <view class="right" else>暂无</view>
          </view>
          <view class="icon">
            <img :src="item.status === 0 ? djhPng : item.status === 1 ? bzzPng : ysxPng" alt="" srcset="" />
          </view>
        </view>
        <view v-if="totalInsuranceList.length !== comInsuranceList.length" class="histroy" @click="getHistroy">
          历史保单
        </view>
      </view>
      <view v-if="ajaxDone && comInsuranceList.length === 0" class="tip zwsj"> </view>
    </view>
  </view>
</template>
<script>
import { getInsuranceList } from '@/api/service.js';
import { commonProjectType } from '@/common/baseUrl.js';

import { familyInner } from '@/components/familyInner';
let bzzPng =
  'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/bzz.png';
let djhPng =
  'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/djh.png';
let ysxPng =
  'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/ysx.png';
export default {
  name: 'InsuranceList',
  filters: {
    formatDate(date) {
      if (date) {
        return date.split(' ')[0];
      }
    }
  },
  components: {
    familyInner
  },
  data() {
    return {
      bzzPng,
      djhPng,
      ysxPng,
      familyScrollLeft: 0,
      familyList: [],
      insruanceList: [],
      comInsuranceList: [],
      totalInsuranceList: [],
      patientId: '',
      loading: true,
      familyIndex: 0,
      currentPatientId: '',
      hasScroll: false,
      ajaxDone: false
    };
  },
  onLoad() {
    this.patientId = this.$store.state.join.patientid;
    this.getInsuranceListInner();
    this.getHistoryInsuranceList();
  },
  onPageScroll(obj) {
    // console.log('onPageScroll obj2:', obj);
    if (!this.hasScroll && obj.scrollTop > 10) {
      this.hasScroll = true;
    } else if (this.hasScroll && obj.scrollTop < 10) {
      this.hasScroll = false;
    }
  },
  methods: {
    changePerson(index, relation, insuredId) {
      console.log('index:', index);
      this.familyIndex = index;
      this.currentPatientId = insuredId;

      if (index === 0) {
        this.comInsuranceList = this.insruanceList;
      } else {
        this.comInsuranceList = this.insruanceList.filter((item) => {
          return item.insuredId === insuredId;
        });
      }
    },
    goDetail(id) {
      this.$wxPromise.navigateTo({
        url: '/pages/index/insuranceDetail?id=' + id
      });
    },
    getInsuranceListInner() {
      getInsuranceList(this.patientId, { projectType: commonProjectType, statusList: '0,1' }).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取保险订单列表失败' });
          return;
        }
        this.ajaxDone = true;
        this.comInsuranceList = this.insruanceList = res.data;
      });
    },
    getHistoryInsuranceList() {
      getInsuranceList(this.patientId, { projectType: commonProjectType, statusList: '3,4,5,8,9,10' }).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取保险订单列表失败' });
          return;
        }
        this.totalInsuranceList = Object.assign([], this.insruanceList).concat(res.data);
        this.loading = false;
      });
    },
    getHistroy() {
      if (this.familyIndex === 0) {
        this.comInsuranceList = this.totalInsuranceList;
      } else {
        this.comInsuranceList = this.totalInsuranceList.filter((item) => {
          return item.insuredId === this.currentPatientId;
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  .list {
    .item {
      width: 700rpx;
      margin: auto;
      margin-top: 24rpx;
      border-radius: 24rpx;
      background: #ffffff;
      padding: 36rpx 24rpx;
      box-sizing: border-box;
      position: relative;
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
      .info {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          width: 200rpx;
          flex-shrink: 0;
        }
        .right {
          flex-shrink: 0;
          width: 500rpx;
        }
      }
      .icon {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 96rpx;
        height: 96rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .histroy {
      cursor: pointer;
      text-align: center;
      color: blue;
      margin-top: 20rpx;
    }
  }
}
</style>
